<template>
    <div>
        <el-dialog :title="cateInfo.isAdd ? '添加商品分类' : '编辑商品分类'" :visible.sync="cateInfo.isShow">
            <el-form :model="cateFrom" :rules="rules" ref="cateRef">
                <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
                    <!-- <el-select v-model="cateFrom.pid" placeholder="请选择">
                        <el-option label="顶级分类" :value="0"></el-option>
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select> -->
                    <el-select v-model="cateFrom.pid" placeholder="请选择">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
                    <el-input autocomplete="off" v-model="cateFrom.catename"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth" v-if="cateFrom.pid !=0" >
                    <el-upload action="#" list-type="picture-card"
                        :on-preview="onPreview" 
                        :auto-upload="false"
                        :on-change="changeInfo"
                        :file-list="fileList" 
                        :limit="1"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="cateFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { cateAdd, cateEdit, cateInfo } from '../../request/api'
import { mapGetters, mapActions } from 'vuex'
export default {
    props: ['cateInfo'],
    data() {
        return {
            // 清空图片展示
            fileList:[],
            dialogImageUrl: '',
            dialogVisible: false,
            formLabelWidth: '120px',
            cateFrom: {
                pid: '',
                catename: '',
                img: '',
                status: 1
            },
            // 规则验证
            rules: {
                pid: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
                catename: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        // 文件改变触发事件
        changeInfo(file,fileList){
            this.cateFrom.img=file.raw
        },
    //   图片预览
    onPreview(file){
        // console.log(file,'file');
        // 打开预览弹框
        this.dialogVisible=true
        // 给弹框添加图片地址
        this.dialogImageUrl=file.url
    },
        ...mapActions({
            getCate: 'cate/getCateListAction'
        }),
        // 回显
        lookUp(id) {
            // 调用一条数据
            cateInfo({ id }).then(res => {
                // console.log(res.list);
                if (res.code == 200) {
                    this.cateFrom = res.list
                    this.cateFrom.id = id
                    // 图片回显
                    this.fileList=this.cateFrom?[{url:this.cateFrom.img}]:[]
                }
            })
        },
        cancel() {
            this.$emit('cancel', false)
            // 清空并重置
            this.reset()
        },
        // 重置
        reset() {
            this.cateFrom = {
                pid: '',
                catename: '',
                img: '',
                status: 1
            }
            // 清空表单验证
            this.$refs.cateRef.resetFields()
            // 清空上传文件
            this.fileList=[]
        },
        // 确认添加事件
        confirm() {
            this.$refs.cateRef.validate((val) => {
                if (val) {
                    // 判断是添加还是编辑
                    if (this.cateInfo.isAdd) {
                        // 添加
                        cateAdd(this.cateFrom)
                            .then(res => {
                                // console.log(res, '99999');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 确认添加后关闭弹窗
                                    this.cancel()
                                    this.getCate()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 编辑
                        cateEdit(this.cateFrom)
                            .then(res => {
                                // console.log(res,'3333');
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 编辑完成关闭弹窗
                                    this.cancel()
                                    this.getCate()
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                }
            })
        }
    },
    mounted() {
    },
    watch: {},
    computed: {
        ...mapGetters({
            catelist: 'cate/getCateList'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>